<template>
  <!-- 准备一个容器 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
// 引入echarts

export default {
  name: "barCharts",
  mounted() {
    // 初始化echarts实例
    let barCharts = this.$echarts.init(this.$refs.charts);
    // 配置数据
    barCharts.setOption({
        xAxis:{
          // 隐藏x轴
            show:false,
            // 均分
            type:'category'
        },
        yAxis:{
          // 隐藏y轴
            show:false
        },
        series:[
            {
              // 柱状图
                type:'bar',
                data:[50,20,30,40,50,23,80,75,100],
                color:'skyblue'
            }
        ],
        // 布局调试
        grid:{
            top:0,
            left:0,
            right:0,
            bottom:0
        },
        // 鼠标移入提示
        tooltip:{}
    })
 
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>